<template>
	<span-item v-for="item in spanItemList"
						:key="item"
						:class="'bg-'+item.bg"
						:spanTitle="item.title"
						:spanImage="item.image"
						:routerPath="item.routerPath" />
</template>
<script>
import SpanItem from '@/components/SpanItem.vue'
export default {
	components: { SpanItem },
	name: 'CaoZuo',
	data () {
		return {
			spanItemList: [
				{ title: "上班", image: require("../assets/上班.png"), bg: "sb",routerPath:"/Caozuo/ShangBan" },
				{ title: "下班", image: require("../assets/下班.png"), bg: "xb",routerPath:"/Caozuo/XiaBan" },
				{ title: "紧急处理", image: require("../assets/紧急处理.png"), bg: "jjcl",routerPath:"/Caozuo/JinjiChuli" }
			]
		}
	}
}
</script>
<style scoped>
.bg-sb {
  background: linear-gradient(0deg, rgb(61, 80, 204) 0%, rgb(50, 157, 219) 53.47%, rgb(38, 255, 241) 100%);
}
.bg-xb {
  background: linear-gradient(0deg, rgb(33, 129, 148) 0%, rgb(126, 191, 34) 53.47%, rgb(255, 229, 33) 100%);
}
.bg-jjcl {
      background: linear-gradient(rgb(244, 59, 71) 0%, rgb(69, 58, 148) 100%);
}
</style>